<template>
  <div id="app" class="app">
    <router-view/>
      <!-- <el-row > -->
        <el-row v-if="flag" class="footer  hidden-sm-and-up">
          <el-col class="bar-title " @click="addColor(0)" :span="12">新建</el-col>
          <el-col class="bar-title" @click="addColor(1)"  :span="12">我的</el-col>
        </el-row>
      <!-- </el-row> -->
  </div>
</template>
<script>
import { defineComponent,ref,watch  } from 'vue'
import { useRoute,useRouter } from "vue-router";

export default defineComponent({
  setup() {
    const route = useRoute()
    const router = useRouter()

    //用来判断是否显示底部导航
    let flag = ref(false)
    //给当前页面的底部按钮添加类名
    function addColor(index){
      let arr = document.querySelectorAll('.bar-title')
      for (let index = 0; index < arr.length; index++) {
        arr[index].classList.remove('bar-title-color')
      }
      arr[index].classList.add('bar-title-color')
      index == 1 ? router.push('/home') : router.push('/vote')
    }

    // 判断路由来显示底部
    function isHomeOrVote(path){
      let loginPath = ['/login','/register']
      if ( loginPath.includes(path) ){
        document.getElementById('app').style.height = "100vh"
        // console.log(document.getElementsByClassName('.app'))
        // document.getElementById('app1').style.height = "100vh"
      }else{
        document.getElementById('app').style.height = "100%"
        // document.getElementById('app1').style.height = "100%"
      }
      // console.log(path)
      let arrPath =['/home','/vote']
      arrPath.includes(path) ? flag.value = true : flag.value = false
    }

    //监视路由变化
    watch(()=>route.path,()=>{
      isHomeOrVote(route.path)
    },
    {immediate: true}//   默认初始化执行一次
    )
    return {
      addColor,
      flag
    }
  },
})
</script>


<style   lang="less">
//更改进度条颜色
#nprogress .bar {
  background: white !important; //自定义颜色
}


@color:#0B9CE9;
*{
  padding: 0px;
  margin: 0px;
}
html{
  width: 100%;
  height: 100vh;
}
body{
  // display: flex;
  position: relative;
  min-height: 100%;
  max-width: 100%;
}
#app{
  // position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  background: white;
  color: #2c3e50;
  user-select: none;
}
.footer{
  position: absolute !important;
  width: 100%;
  height: 5vh;
  bottom: 0px;
  border-top: 1px solid #eee;
  text-align: center;
  line-height: 36px;
  background: white;
  font-size: 14px;
}
.bar-title-color{
  color: @color;
}
.bar-title:nth-child(1){
  border-right: 1px solid #eee;
}
</style>
